<template>
  <BackTab>
    <template v-slot:center>评论信息管理中心___</template>
    <template v-slot:icon
      ><el-icon><UserFilled /></el-icon
    ></template>
    <template v-slot:list>评论列表</template>
  </BackTab>
  <div class="review">
    <div class="review-item" v-for="(item, index) in discussList" :key="index">
      <div class="image">
        <img :src="item.avater" alt="" />
      </div>
      <div class="center">
        <div class="name">{{ item.userName }}</div>
        <div class="content">{{ item.content }}</div>
      </div>
      <div class="time">{{ utils.day(item.create_time) }}</div>
      <div class="delete" @click="deleteDis(item.id)">删除</div>
    </div>
    <div class="page">
      <el-pagination
        layout="total,prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import BackTab from "@/components/common/tabbar/BackTab.vue";
import { onMounted, ref } from "vue";
import { getReviews, query,getDeleteDis } from "@/server/reviews";
import utils from "@/utils/utils";
import { ElMessage } from "element-plus";

const discussList = ref<any>([]);
const total = ref(0);

onMounted(async () => {
  await getReviewsList();
});

function getReviewsList() {
  getReviews().then((res: any) => {
    discussList.value = res.list;
    total.value = res.total;
  });
}
const handleCurrentChange =async (newPage: number) => {
  query.pageNum = newPage;
  await getReviewsList()
};

const deleteDis = (id:number) => {
  getDeleteDis(id).then(async (res:any) => {
    ElMessage.success(res.message)
    await getReviewsList()
  })
  
}


</script>

<style lang="less" scoped>
.review {
  background-color: #fff;
  border: 1px solid rgb(243, 236, 236);
  padding: 8px;
  &-item {
    background-color: #f5f7fa;
    padding: 5px 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .image {
      width: 35px;
      height: 35px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50px;
      }
    }
    .center {
      flex: 1;
      margin: 0 10px;
      display: flex;
      flex-direction: column;
    }
    .time {
      font-size: 12px;
      width: 12%;
    }
    .delete {
      font-size: 12px;
      width: 5%;
      color: rgb(7, 11, 83);
    }
    .delete:hover {
      cursor: pointer;
    }
  }
  .page {
    padding-top: 10px;
    display: flex;
    justify-content: end;
  }
}
</style>
